/************************************************************************************
smaller than 1000
*************************************************************************************/
@media screen and (max-width: 1000px) {
	#wrap {
		margin: 0 auto;
		width: 95%;
	}
	.tin2{
		max-width:50%;
	}
	.tin2 img{
		width:100%;
		height:auto;
	}
}
/************************************************************************************
smaller than 900
*************************************************************************************/
@media screen and (max-width: 900px) {
	#wrap {
		margin: 0 auto;
		width: 95%;
	}
	.tin2 img{
		width:auto;
		max-width:none;
	}
}
/************************************************************************************
smaller than 800
*************************************************************************************/
@media screen and (max-width: 800px) {

	#wrap {
		margin: 0 auto;
		width:80%;
	}
	/* menu reponsible web */
	.menu {
		float:left;
		position: relative;
		height:auto;
		background-color: #2F2F2F;
	}	
	.menu ul {
		display:block;
		height:auto;
		width:100%;
	}
	.menu li {
		display:block;
		width:50%;
		float:left;
		padding:0px; 
	}	
	.menu li a{
		display:block;
		padding-left:5px;
		line-height:48px;
		text-align:left;
		border-bottom: 1px solid #576979; 
		border-right: 1px solid #576979; 		
	}
	.menu li:hover a, .menu li.act a {
		display:block;
		padding-left:5px;
		line-height:48px;
		text-align:left;
		border-top: 1px solid #576979;
		border-bottom: 1px solid #576979; 
		border-right: 1px solid #576979; 		
	}	
	.menu li:nth-child(odd) a{
		border-left: 1px solid #576979;
	}
	/* end menu reposible */	
	.tin2 {
		height:135px;
		max-height:none;
	}
}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {

	#wrap {
		margin: 0 auto;
		width: 80%;
	}
	#logo{
		display:block;
		text-align:center;
		width:100%;
	}
	/* menu reponsible web */
	.menu {
		position: relative;
		height:auto;
	}	
	.menu ul {
		display:none;
		height:auto;
	}
 	.menu a#pull {  
        display: block;  
        width: 100%;
		color:#fff;
		position:relative;
		font-size:15px;
		padding-left:10px;
    } 	
   	.menu a#pull:after {  
        content:"";  
        background:url(../images/menu-mobile.png) bottom no-repeat;  
        width: 30px;  
        height: 30px; 
        position: absolute;  
        right: 15px;  
        bottom: 10px;  
    }  	

	/* end menu reposible */
	.fr1{
		float:left;
		clear:both;
		margin-top:5px;
		margin-bottom:5px;
		margin-left:10px;
	}
	.tin2{
		width:100%;
		height:auto;
		float:left;
		clear:both;
		margin:5px 0px;
		padding:0px;
	}
	.tin2 img{
		width:100%;
		max-width:none;
	}
	.tab ul li{
		width:50%;
		padding:5px 0px;
		border:none;
	}	
}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {

	/* disable webkit text size adjust (for iPhone) */
	html {
		-webkit-text-size-adjust: none;
	}
	/* main nav */
	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}
	.info_header{
		clear:both;
	}
	.fr1{
		float:left;
	}
	.tin2{
		width:100%;
		height:auto;
		float:left;
		clear:both;
		margin:5px 0px;
		padding:0px;
	}
	.tin2 img{
		width:100%;
		max-width:none;
	}
	.tab ul li{
		width:49%;
		padding:5px 0px;
	}
}
@media screen and (max-width: 320px) {	
	.info_header{
		clear:both;
	}
	.fr1{
		float:left;
	}	
}